<template>
      <!-- 添加对话框 -->
      <a-modal
        :title="title"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="closeAddMenu"
        :cancelText="cancelText"
        :centered="centered"
        :mask="mask"
        :maskClosable="maskClosable"
        :okText="okText"
        width="560px"

      >
        <a-form-model
          ref="addMenuForm"
          :model="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          labelAlign="left"
          :colon="colon"
          :rules="formRules"
        >
          <a-row type="flex"  justify="center">
            <a-col :span="24">
              <a-form-model-item label="上级菜单" prop="parentMenuName">
                <a-tree-select
                  v-model= "form.parentMenuName"
                  tree-data-simple-mode
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  :tree-data="treeData"
                  placeholder="请选择上级菜单"
                  :load-data="onLoadData"
                  @select="selectTreeNode"
                />
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="菜单类型" prop="menuType">
                <a-radio-group v-model="form.menuType">
                  <a-radio value="M">
                    目录
                  </a-radio>
                  <a-radio value="C">
                    菜单
                  </a-radio>
                  <a-radio value="F">
                    按钮
                  </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item v-if="form.menuType !='F' " label="菜单图标" prop="icon">

                <a-popover
                  title="菜单图标"
                  trigger="focus"
                  placement="bottom"
                  >
                  <template slot="content">
                    <iocn-selector  @selected="selectIcon" ></iocn-selector>
                  </template>

                  <a-input v-model="form.icon" placeholder="请选择菜单图标">
                    <svg-icon
                      v-if="form.icon"
                      slot="prefix"
                      :icon-class="form.icon"
                      style="height: 32px;width: 16px;"
                    />
                    <a-icon v-else slot="prefix" type="search" />
                  </a-input>

                </a-popover>

              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="菜单名称" :label-col="labelColItem" prop="menuName" :wrapper-col="wrapperColItem">
                <a-input v-model="form.menuName" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="显示排序" :label-col="labelColItem" prop="orderNum" :wrapper-col="wrapperColItem">
                <!--<a-input v-model="form.orderNum" />-->
                <a-input-number v-model="form.orderNum" :min="1" :max="50"  />
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="是否外链" v-if="form.menuType !='F' " :label-col="labelColItem" :wrapper-col="wrapperColItem">
                <a-radio-group v-model="form.frame">
                  <a-radio value="0">
                    是
                  </a-radio>
                  <a-radio value="1">
                    否
                  </a-radio>

                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="路由地址" v-if="form.menuType !='F' " prop="path" :label-col="labelColItem" :wrapper-col="wrapperColItem">
                <a-input v-model="form.path" />
              </a-form-model-item>
            </a-col>

            <a-col :span="12" v-if="form.menuType =='C' ">
              <a-form-model-item label="组件路径"  :label-col="labelColItem" prop="component" :wrapper-col="wrapperColItem">
                <a-input v-model="form.component" />
              </a-form-model-item>
            </a-col>
            <a-col :span="12" v-if="form.menuType !='M'">
              <a-form-model-item label="权限标识"   :label-col="labelColItem" prop="perms" :wrapper-col="wrapperColItem">
                <a-input v-model="form.perms" />
              </a-form-model-item>
            </a-col>

            <a-col :span="12">
              <a-form-model-item label="显示状态" v-if="form.menuType !='F'" prop="visible" :label-col="labelColItem" :wrapper-col="wrapperColItem">
                <a-radio-group v-model="form.visible">
                  <a-radio value="0">
                    显示
                  </a-radio>
                  <a-radio value="1">
                    隐藏
                  </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="菜单状态" v-if="form.menuType !='F'" prop="status" :label-col="labelColItem" :wrapper-col="wrapperColItem">
                <a-radio-group v-model="form.status">
                  <a-radio value="0">
                    正常
                  </a-radio>
                  <a-radio value="1">
                    停用
                  </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-col>

          </a-row>
        </a-form-model>
      </a-modal>
</template>

<script>
  import {queryMenuTreeByParentId,addMenu} from "@/static/api/base/menu";
  import IocnSelector from "@/components/IocnSelector/IocnSelector";

    export default {
      name: "addMenu",
      components:{IocnSelector},
      data(){
        return {
          visible: false,
          confirmLoading: false,
          title: "添加",
          cancelText: "取消",
          okText:"确定",
          centered:true,
          mask:true,
          maskClosable:false,
          wrapperCol:{ span: 19 },
          labelCol:{ span: 4 },
          wrapperColItem:{ span: 14,offset: 2 },
          labelColItem:{ span: 6 },
          colon: false,
          // layout:"Horizontal",
          form:{

          },
          formRules:{
            parentMenuName :[{ required: true, message: '请选择上级菜单', trigger: 'change'}],
            menuType:[{required:true}],
            menuName:[{required:true, message: '请填写菜单名称', trigger: 'blur'}, ],
            orderNum:[{required:true, message: '请填排序编号', trigger: 'blur'}],
          },
          treeData:[],
          treeSelectValue:'',
        }
      },
      created(){
        this.initFormData();
        //初始化菜单树
        this.initTreeData(0);
      },
      methods:{
        handleOk(){
          //验证表单并提交
          this.$refs.addMenuForm.validate(valid =>{
            if (valid){
              debugger
              addMenu(this.form).then(response => {
                debugger
                if (response.data.data >0) {
                  this.msgSuccess("添加","添加成功");
                  this.closeAddMenu();
                  this.$parent.getPage();
                }
              })
            }else{
              this.msgError("添加","添加失败");
              return false;
            }
          })
        },
        showAddMenu(){
          this.visible = true;
        },
        closeAddMenu(){
          this.visible = false;
          this.reset();  //重置表单
        },
        onLoadData(treeNode){
          const {id} = treeNode.dataRef;
          const _this = this;
          return new Promise((resolve) => {
            if (treeNode.dataRef.children) { // 有值了直接渲染
              resolve();
              return;
            }
            // 没有值根据当前父节点获取下面子节点并挂在树节点中，添加到对应父节点的children中
            queryMenuTreeByParentId(id).then(response => {
              treeNode.dataRef.children = response.data.data;
              _this.treeData = [..._this.treeData]
              // this.treeData.concat(response.data.data);
            });
            resolve();
          })
        },
        initTreeData(parentId){
          queryMenuTreeByParentId(parentId).then(response => {
            this.treeData = response.data.data;
            debugger
          });
        },
        selectTreeNode(value, node, extra){
          this.form.parentId = node.dataRef.id;
          debugger
        },
        selectIcon(name){
          this.form.icon = name;
          debugger
        },
        initFormData(){
          //重置添加表单
          this.form= {
            menuType:'M',
            parentMenuName:undefined,
            parentId:undefined,
            icon:undefined,
            menuName:undefined,
            orderNum: undefined,
            frame:'1',
            path:undefined,
            visible:'0',
            status:'0',
            component:'',
            perms:'',
          };
        },
        reset(){
           this.initFormData();
          debugger
          this.$refs.addMenuForm.resetFields();
        }

      }
    }
</script>

<style scoped>
  .ant-form-item {
    margin-bottom: 8px;
  }
  .ant-form-item-no-colon label {
    font-weight: 800;
  }

</style>
